<template>
  <view class="page-content">
    <view class="header-box">
      <projectHead id="ProjectHead" :projectInfo="objData"></projectHead>
      <u-card
        :show-head="false"
        :body-style="{ padding: 0 }"
        margin="20rpx 0 0 0"
      >
        <u-tabs
          slot="body"
          :list="list"
          :is-scroll="false"
          height="100"
          bar-width="140"
          v-model="current"
          @change="changeTabs"
        ></u-tabs>
      </u-card>
    </view>

    <view class="content-item" :style="`margin-top:${px2rpx(height)}rpx`">
      <contractList
        ref="refCom0"
        :current="current"
        v-show="!isNaN(current) && current === 0"
      ></contractList>
      <payRegisterList
        ref="refCom1"
        :current="current"
        v-show="!isNaN(current) && current === 1"
      ></payRegisterList>
      <fundExpendList
        ref="refCom2"
        :current="current"
        v-show="!isNaN(current) && current === 2"
      ></fundExpendList>
      <fundAdjustList
        ref="refCom3"
        :current="current"
        v-show="!isNaN(current) && current === 3"
      ></fundAdjustList>
    </view>
  </view>
</template>
<script lang="ts" setup>
import projectHead from '../components/projectHead.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { px2rpx } from '@/utils/tools';
import { useDomHeight } from '@/hooks/useDomHeight';
import contractList from './components/contractList.vue';
import payRegisterList from './components/payRegisterList.vue';
import fundExpendList from './components/fundExpendList.vue';
import fundAdjustList from './components/fundAdjustList.vue';

const { height } = useDomHeight('.header-box');
const list = [
  {
    name: '合同管理',
  },
  {
    name: '付款登记',
  },
  {
    name: '经费支出',
  },
  {
    name: '经费调整',
  },
];
const current = ref<number>(0);
const changeTabs = (tabs: any) => {
  current.value = tabs;
  nextTick(() => {
    queryList();
  });
};
const refCom0 = ref();
const refCom1 = ref();
const refCom2 = ref();
const refCom3 = ref();
const queryList = () => {
  switch (current.value) {
    case 0:
      refCom0.value ? refCom0.value.resetTable() : () => {};
      break;
    case 1:
      refCom1.value ? refCom1.value.resetTable() : () => {};
      break;
    case 2:
      refCom2.value ? refCom2.value.resetTable() : () => {};
      break;
    case 3:
      refCom3.value ? refCom3.value.resetTable() : () => {};
      break;
  }
};
const objData = ref<any>({});
const queryData = reactive<any>({});

onLoad(() => {
  const { params } = (uni as any).$Router.getQuery();
  objData.value = JSON.parse(decodeURIComponent(params));
  queryData.projectId = objData.value.projectId;
});
onShow(() => {
  nextTick(() => {
    queryList();
  });
});
</script>
<style>
.page-content {
  width: 100%;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
.header-box {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f0f1f2;
  z-index: 10;
  padding: 30rpx;
}
.content-item {
  margin-top: 60rpx;
  padding: 0 30rpx;
  /* padding-bottom: 140rpx; */
}
</style>
